import Vue from 'vue'
import bus from '@/components/storybook/utilties/bus'

export const NameTemplate = Vue.component('NameTemplate', {
  template:
    `
      <el-link :underline="false" @click="onSelect" v-if="$hasPermissionRouterName(('report-' + $data.data.name).replace(/ /g, ''))">{{$data.data.name}}</el-link>
      <el-tooltip effect="dark" :open-delay="1000" content="No Permission" placement="top" v-else>
        <i class="el-icon-lock" style="opacity: 0.7;"> {{ $data.data.name}}</i>
      </el-tooltip>
    `,
  methods: {

    onSelect () {
      bus.$emit('event:draw', this.$data.data)
    }
  }
})

export const IntegrationTemplate = Vue.component('IntegrationTemplate', {
  template:
    `
     <span>{{integrationName}}</span>
    `,
  computed: {
    integrationName () {
      return this.$data.data.integrationList.map(i => i.name).join()
    }
  }
})

export const JiraTemplate = Vue.component('JiraTemplate', {
  template:
    `
      <el-link size="mini" :underline="false" type="success"  :href="href"  target="_blank">{{$data.data.jiraNumber}}</el-link>
    `,
  computed: {
    href () {
      const jiraNumber = this.$data.data.jiraNumber || 'NA'

      if (jiraNumber.indexOf('http') === -1) {
        return `https://jira.mspbots.ai/browse/${jiraNumber}`
      }

      return jiraNumber
    }
  }
})
export const StatusTemplate = Vue.component('StatusTemplate', {
  template:
    `
      <span :style="{color:color}">
        {{$data.data.status}}
      </span>
    `,
  computed: {
    color () {
      switch (this.$data.data.status) {
        case 'Requested':
          return 'black'
        case 'In-Dev':
          return 'red'
        case 'Alpha':
          return '#E6A23C'
        case 'Published':
          return 'green'
      }
    }
  }
})
export const BussinessTypeTemplate = Vue.component('BussinessTypeTemplate', {
  template:
    `
      <span :style="{fontWeight:color}">
        {{$data.data.businessType}}
      </span>
    `,
  computed: {
    color () {
      switch (this.$data.data.businessType) {
        case 'Custom':
          return 'bold'
        default :
          return ''
      }
    }
  }
})

export const RenderName = () => {
  return {
    template: NameTemplate
  }
}

export const RenderIntegration = () => {
  return {
    template: IntegrationTemplate
  }
}

export const RenderJira = () => {
  return {
    template: JiraTemplate
  }
}
export const RenderStatus = () => {
  return {
    template: StatusTemplate
  }
}
export const RenderBussinessType = () => {
  return {
    template: BussinessTypeTemplate
  }
}
